<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  :host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 8px 0;
  }

  p {
    margin: 0;
  }

  .spacer {
    flex: 1;
  }

  .toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #ef7da9;
    color: white;
    font-weight: 600;
  }

  .toolbar img {
    margin: 0 16px;
  }

  .toolbar #twitter-logo {
    height: 40px;
    margin: 0 16px;
  }

  .toolbar #twitter-logo:hover {
    opacity: 0.8;
  }

  .content {
    display: flex;
    margin: 82px auto 32px;
    padding: 0 16px;
    max-width: 960px;
    flex-direction: column;
    align-items: center;
  }

  svg.material-icons {
    height: 24px;
    width: auto;
  }

  svg.material-icons:not(:last-child) {
    margin-right: 8px;
  }

  .card svg.material-icons path {
    fill: #888;
  }

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }

  .card {
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #fafafa;
    height: 40px;
    width: 200px;
    margin: 0 8px 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    line-height: 24px;
  }

  .card-container .card:not(:last-child) {
    margin-right: 0;
  }

  .card.card-small {
    height: 16px;
    width: 168px;
  }

  .card-container .card:not(.highlight-card) {
    cursor: pointer;
  }

  .card-container .card:not(.highlight-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(black, 0.35);
  }

  .card-container .card:not(.highlight-card):hover .material-icons path {
    fill: rgb(105, 103, 103);
  }

  .card.highlight-card {
    background-color: #ef7da9;
    color: white;
    font-weight: 600;
    border: none;
    width: auto;
    min-width: 30%;
    position: relative;
  }

  .card.card.highlight-card span {
    margin-left: 60px;
  }

  svg#rocket {
    width: 80px;
    position: absolute;
    left: -10px;
    top: -24px;
  }

  svg#rocket-smoke {
    height: calc(100vh - 95px);
    position: absolute;
    top: 10px;
    right: 180px;
    z-index: -10;
  }

  a,
  a:visited,
  a:hover {
    color: #1976d2;
    text-decoration: none;
  }

  a:hover {
    color: #125699;
  }

  .terminal {
    position: relative;
    width: 80%;
    max-width: 600px;
    border-radius: 6px;
    padding-top: 45px;
    margin-top: 8px;
    overflow: hidden;
    background-color: rgb(15, 15, 16);
  }

  .terminal::before {
    content: "\2022 \2022 \2022";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: rgb(58, 58, 58);
    color: #c2c3c4;
    width: 100%;
    font-size: 2rem;
    line-height: 0;
    padding: 14px 0;
    text-indent: 4px;
  }

  .terminal pre {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    color: white;
    padding: 0 1rem 1rem;
    margin: 0;
  }

  .circle-link {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    margin: 8px;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 1s ease-out;
  }

  .circle-link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  }

  footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    line-height: 20px;
  }

  footer a {
    display: flex;
    align-items: center;
  }

  .github-star-badge {
    color: #24292e;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    margin-left: 4px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  }

  .github-star-badge:hover {
    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
    border-color: rgba(27, 31, 35, .35);
    background-position: -.5em;
  }

  .github-star-badge .material-icons {
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }

  svg#clouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
  }


  /* Responsive Styles */
  @media screen and (max-width: 767px) {

    .card-container>*:not(.circle-link),
    .terminal {
      width: 100%;
    }

    .card:not(.highlight-card) {
      height: 16px;
      margin: 8px 0;
    }

    .card.highlight-card span {
      margin-left: 72px;
    }

    svg#rocket-smoke {
      right: 120px;
      transform: rotate(-5deg);
    }
  }

  @media screen and (max-width: 575px) {
    svg#rocket-smoke {
      display: none;
      visibility: hidden;
    }
  }

</style>

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img width="40" alt="Angular Logo"
    src="" />
  <span>Welcome</span>
  <div class="spacer"></div>
  <!-- <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
    <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <rect width="400" height="400" fill="none" />
      <path
        d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
        fill="#fff" />
    </svg>
  </a> -->
</div>

<div class="content" role="main">

  <!-- Highlight Card -->
  <div class="card highlight-card card-small">

    <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678"
      viewBox="0 0 101.678 101.678">
      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)"
          fill="#ef7da9" />
        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
          <path id="Path_33" data-name="Path 33"
            d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
            transform="translate(0.371 3.363)" fill="#fff" />
          <path id="Path_34" data-name="Path 34"
            d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
            transform="translate(0 0.005)" fill="#fff" />
        </g>
      </g>
    </svg>

    <span>live2dDemo  | by 异步加载</span>

    <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632"
      viewBox="0 0 516.119 1083.632">
      <path id="Path_40" data-name="Path 40"
        d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
        transform="translate(-147.025 -140.939)" fill="#f5f5f5" />
    </svg>

  </div>

  <!-- Resources -->
  <h2>Contact me</h2>

  <div class="card-container">
    <a class="card" target="_blank" rel="noopener" href="https://github.com/stack-stark/ng-live2d">
      <svg t="1583387691768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2265" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
        <defs>
          <style type="text/css"></style>
        </defs>
        <path
          d="M0 520.886c0-69.368 13.51-135.697 40.498-199.02 26.987-63.323 63.322-117.826 109.006-163.51 45.65-45.65 100.154-81.985 163.51-109.006A502.289 502.289 0 0 1 512 8.92c69.335 0 135.663 13.477 198.986 40.497 63.356 26.988 117.86 63.323 163.51 109.007 45.684 45.65 82.02 100.154 109.006 163.51A502.289 502.289 0 0 1 1024 520.852c0 111.318-32.504 211.472-97.511 300.494-64.975 88.989-148.48 150.825-250.484 185.476-5.351 0-9.348-0.99-11.99-2.973-2.676-1.982-4.196-3.997-4.526-6.012a59.458 59.458 0 0 1-0.495-8.984 7.663 7.663 0 0 1-0.991-3.006v-128.99c0-40.63-14.336-75.314-43.008-103.986 76.667-13.345 134.011-41.819 171.999-85.487 37.987-43.669 57.013-96.52 57.013-158.522 0-58.005-18.663-108.346-56.022-150.99 13.345-42.678 11-87.668-6.97-135.003-18.697-1.322-39.011 1.85-61.01 9.513-22 7.663-38.318 14.831-49.02 21.47-10.637 6.673-20.316 13.016-28.97 19.027-38.68-10.669-81.854-16.02-129.486-16.02-47.7 0-90.509 5.351-128.529 16.02-7.333-5.35-15.855-11.164-25.5-17.507-9.68-6.342-26.493-14.005-50.507-22.99-23.982-9.018-45.65-12.85-65.008-11.495-18.663 47.996-20.645 93.646-5.979 136.984-36.665 42.678-54.998 92.986-54.998 150.99 0 62.002 18.663 114.689 55.99 157.994 37.326 43.339 94.67 72.01 171.998 86.016a142.303 142.303 0 0 0-39.969 70.029c-56.683 13.972-96.355 3.963-119.015-30.06-42.017-61.308-79.674-83.307-113.003-65.965-4.69 4.657-3.997 9.48 1.982 14.501 6.012 4.988 14.996 11.66 27.02 19.985 11.99 8.357 20.976 17.507 26.987 27.515 0.661 1.322 2.51 6.177 5.517 14.502a831.917 831.917 0 0 0 8.985 23.981c2.973 7.663 8.654 16.186 17.011 25.5 8.324 9.349 18.003 17.178 29.003 23.52 11 6.309 26.161 11 45.485 14.006 19.324 2.972 41.323 3.138 65.998 0.495v100.484c0 0.991-0.165 2.643-0.495 5.021-0.33 2.312-0.991 3.964-1.982 4.955-0.991 1.024-2.345 2.015-4.03 3.039a12.52 12.52 0 0 1-6.474 1.486c-2.676 0-6.012-0.33-10.009-0.99-101.343-35.345-183.825-97.182-247.51-185.51C31.842 731.037 0 631.577 0 520.92z"
          p-id="2266"></path>
      </svg>

      <span style="margin-left: 8px;">github</span>

      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /></svg> </a>

    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
      <svg t="1583387877354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4204" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
        <defs>
          <style type="text/css"></style>
        </defs>
        <path
          d="M117.149737 906.850263V117.160081h789.690182v789.690182z m148.521374-641.706667v492.533657h248.873374V367.843556h145.025293v389.906101h98.735321V265.143596z"
          fill="#CB3837" p-id="4205"></path>
      </svg>

      <span style="margin-left: 8px;">npm</span>

      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /></svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="http://asnyc.cn/">
      <svg t="1583387966863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="8029" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
        <defs>
          <style type="text/css"></style>
        </defs>
        <path
          d="M821.86052 388.875952c0 4.800938 0.10002 9.601875 0 14.402813-0.200039 7.201407-1.000195 14.302794-1.700332 21.5042-1.000195 9.701895-2.700527 19.30377-4.600899 28.805627-2.10041 10.402032-4.900957 20.504005-8.201602 30.505958-7.601485 23.504591-17.903497 45.808947-30.806017 66.913069-6.301231 10.201993-13.102559 20.103927-20.504004 29.505763-10.201993 13.00254-21.204141 25.204923-33.406525 36.40711-13.402618 12.402422-27.805431 23.60461-43.10842 33.506545-17.003321 10.902129-34.806798 20.203946-53.610471 27.705411-12.502442 5.000977-25.204923 9.201797-38.207462 12.502442-13.302598 3.400664-26.805235 5.701113-40.507912 7.501465-18.203555 2.400469-36.407111 2.20043-54.610666 1.600312-8.901739-0.300059-17.803477-1.600313-26.705216-2.800547-11.702286-1.600313-23.304552-4.000781-34.706778-7.101387-14.202774-3.800742-28.105489-8.60168-41.608127-14.402813-18.603634-8.001563-36.207072-17.603438-52.910334-28.905645-20.804063-14.102754-39.407697-30.505958-56.310998-49.009573-15.202969-16.703262-28.405548-35.006837-39.607736-54.610666-11.702286-20.303966-20.904083-41.708146-27.705411-64.112522-4.100801-13.602657-7.301426-27.505372-9.401837-41.508107-0.900176-6.001172-1.500293-12.002344-2.200429-18.103536-0.900176-8.7017-1.300254-17.503419-1.600313-26.305137-0.200039-6.50127 0.200039-13.102559 0.500098-19.603829 0.300059-5.901153 0.800156-11.802305 1.300254-17.703458 0.600117-5.901153 1.300254-11.702286 2.300449-17.603438 3.800742-22.304356 10.001954-43.908576 18.403594-64.912678 5.401055-13.502637 11.902325-26.505177 19.203751-39.107638 8.60168-14.702872 18.203555-28.605587 29.005665-41.708147 9.001758-11.002149 18.703653-21.5042 29.205705-31.106075 20.303966-18.503614 42.408283-34.40672 66.813049-47.209221 17.703458-9.301817 36.207072-16.803282 55.310803-22.704434 12.8025-3.900762 25.90506-6.901348 39.207658-9.101778 9.401836-1.500293 19.003712-2.500488 28.505567-3.300644 11.802305-1.000195 23.60461-0.600117 35.506935-0.500098 4.600899 0 9.201797 0.700137 13.802696 1.200234 3.800742 0.400078 7.601485 0.900176 11.402227 1.200235 10.201993 1.000195 20.203946 3.100606 30.2059 5.301035 10.502051 2.300449 20.704044 5.301035 30.806016 8.801719 13.202579 4.500879 26.005079 9.901934 38.407502 16.103145 14.602852 7.301426 28.505567 15.803087 41.808165 25.304943 7.901543 5.701113 15.603047 11.702286 22.904474 18.103536 9.701895 8.401641 18.803673 17.403399 27.405353 26.805235 10.302012 11.202188 19.503809 23.304552 28.005469 35.907013a312.661067 312.661067 0 0 1 26.105099 47.40926c6.701309 15.202969 12.202383 30.906036 16.303184 47.009181 2.900567 11.102168 5.000977 22.404376 6.701309 33.806603 2.20043 14.502833 3.400664 29.005665 2.900567 43.608517z m-62.51221 0.10002c0-4.30084 0.200039-8.60168 0-12.90252-0.400078-7.701504-1.400273-15.202969-2.400469-22.904474-1.300254-9.901934-3.500684-19.503809-6.101191-29.005665-1.900371-7.301426-4.30084-14.402813-6.901348-21.40418-4.900957-13.102559-10.902129-25.605001-17.803477-37.607346-5.301035-9.201797-11.202188-17.903497-17.603439-26.305137-9.001758-11.902325-19.103731-22.804454-30.10588-32.906427-10.902129-9.901934-22.504395-18.903692-35.006837-26.705216-16.703262-10.602071-34.40672-19.103731-53.110373-25.404962-11.502247-3.900762-23.204532-6.901348-35.206876-9.001758-10.101973-1.800352-20.203946-3.200625-30.405939-3.600703-4.000781-0.10002-8.001563 0.10002-12.002344-0.700137-1.500293-0.300059-3.200625 0.10002-4.800938 0.200039-1.100215 0.10002-2.20043 0.400078-3.300645 0.400078-6.201211 0-12.402422 0.300059-18.703653 1.000195-9.701895 1.100215-19.30377 2.500488-28.805626 4.700918-15.202969 3.400664-29.905841 8.201602-44.108615 14.402814-14.302794 6.201211-27.90545 13.602657-40.70795 22.304356-14.702872 10.001954-28.305528 21.304161-40.507912 34.3067-4.800938 5.100996-9.501856 10.302012-14.002735 15.803087-10.101973 12.502442-18.903692 25.80504-26.405157 39.907794-6.50127 12.302403-12.202383 25.004884-16.403204 38.307482-4.000781 12.502442-7.301426 25.104903-9.201797 38.207463-1.500293 10.001954-2.800547 19.903887-2.900567 30.00586 0 0.800156 0 1.600313-0.200039 2.400469-0.800156 3.800742-0.700137 7.701504-0.300059 11.502247 0.700137 6.801328 0.500098 13.702676 1.400274 20.604024 0.900176 6.50127 1.500293 13.00254 2.800547 19.40379 1.800352 9.301817 4.100801 18.403594 6.801328 27.405352 3.300645 11.002149 7.401446 21.804259 12.302403 32.206291 6.40125 13.602657 13.902715 26.605196 22.704435 38.907599 7.701504 10.80211 16.303184 21.004102 25.504981 30.505958 10.402032 10.70209 21.804259 20.203946 33.906622 28.905646 10.80211 7.801524 22.304356 14.402813 34.106662 20.403985 9.101778 4.600899 18.603634 8.401641 28.305528 11.802305 8.001563 2.800547 16.103145 5.100996 24.404767 7.001367 9.301817 2.10041 18.703653 4.000781 28.305528 4.900957 8.60168 0.900176 17.20336 1.600313 25.80504 1.700333 10.201993 0.200039 20.403985-0.800156 30.605978-1.700333 8.901739-0.900176 17.803477-2.400469 26.505177-4.400859 19.103731-4.40086 37.407306-10.902129 54.910725-19.603829 7.601485-3.800742 14.902911-8.001563 22.104317-12.502442 11.902325-7.301426 23.004493-15.703067 33.306505-25.004884 8.401641-7.601485 16.403204-15.703067 23.804649-24.304747 6.001172-7.101387 11.602266-14.502833 16.903302-22.104317 4.900957-7.101387 9.101778-14.602852 13.402618-22.204337 6.701309-11.902325 12.002344-24.404767 16.303184-37.307286 5.701113-17.003321 9.701895-34.40672 11.602266-52.310217 0.800156-9.101778 1.400273-18.203555 1.200234-27.305333zM511.299863 731.042782c6.201211 0 12.502442-0.400078 18.703653 0.100019 7.001367 0.600117 14.002735 0.500098 21.004103 1.200235 5.901153 0.600117 11.802305 1.100215 17.703457 1.500293 4.900957 0.300059 9.901934 1.000195 14.702872 1.900371 3.500684 0.700137 7.001367 0.900176 10.402032 1.500293 6.001172 0.900176 11.902325 2.10041 17.903496 3.200625 11.502247 2.000391 22.804454 4.700918 34.106662 7.701504 24.204727 6.301231 47.709318 14.302794 70.713811 24.004689 12.102364 5.100996 24.004688 10.602071 35.606955 16.603243 22.404376 11.402227 43.908576 24.404767 64.312561 39.007618 8.401641 6.101192 16.803282 12.302403 24.904864 18.703653 6.801328 5.301035 13.302598 11.002149 19.803868 16.703263 11.802305 10.101973 22.604415 21.304161 33.506544 32.20629 3.800742 3.800742 6.801328 8.101582 8.001563 13.402618 2.400469 10.602071 0.600117 20.403985-6.801328 28.605587-4.600899 5.100996-9.901934 9.001758-16.803282 10.60207-9.901934 2.300449-19.003712 0.300059-27.305333-5.401055-2.600508-1.800352-4.800938-4.100801-7.001368-6.501269-5.301035-5.801133-10.80211-11.402227-16.603243-16.603243-4.700918-4.100801-9.201797-8.50166-13.802695-12.602462-10.101973-8.901739-20.504005-17.30338-31.406135-25.204922-9.301817-6.801328-18.803673-13.202579-28.605587-19.303771-16.703262-10.502051-34.106661-19.703848-51.910138-27.90545-20.804063-9.501856-42.308263-17.30338-64.312561-23.504591-15.10295-4.30084-30.305919-7.801524-45.808947-10.201992-6.901348-1.100215-13.802696-2.400469-20.804064-3.400664-4.700918-0.700137-9.601875-0.800156-14.302793-1.400274-8.101582-1.100215-16.203165-1.200234-24.404767-1.800352-9.101778-0.700137-18.203555-0.900176-27.305333-0.700136-8.301621 0.200039-16.603243 0.500098-24.904864 1.300254-1.000195 0.10002-1.900371 0.10002-2.900567 0.200039-7.201407 0.10002-14.302794 1.100215-21.5042 1.900371-7.101387 0.800156-14.302794 1.800352-21.40418 2.900566-9.301817 1.500293-18.503614 3.300645-27.705411 5.301036-13.102559 2.900567-26.105099 6.40125-38.80758 10.502051-10.602071 3.400664-21.204141 7.201407-31.506153 11.502246-12.90252 5.301035-25.504981 11.002149-37.907404 17.30338-21.5042 11.002149-42.008205 23.804649-61.512014 38.007423-10.001954 7.201407-19.503809 15.00293-29.005665 22.904474-5.501074 4.600899-10.70209 9.601875-16.003126 14.502832-4.800938 4.500879-9.501856 9.001758-14.202774 13.602657-1.400273 1.300254-2.600508 2.800547-3.900762 4.30084-4.900957 5.301035-10.602071 9.501856-17.703458 10.80211-9.801914 1.800352-19.30377 0.500098-27.105294-6.301231-6.50127-5.701113-10.402032-12.90252-10.502051-21.804258 0-2.900567-0.300059-5.801133 0.400078-8.60168 1.300254-5.701113 4.100801-10.70209 8.001563-15.10295 8.801719-10.001954 18.603634-18.903692 28.405548-27.90545 23.004493-21.204141 47.809338-40.107834 74.114476-56.811096 17.30338-11.002149 35.206876-20.904083 53.71049-29.705802 14.102754-6.801328 28.605587-12.8025 43.208439-18.303575 11.102168-4.20082 22.304356-7.901543 33.606564-11.302208 11.502247-3.400664 23.104513-6.50127 34.806798-9.001758 9.701895-2.10041 19.40379-4.000781 29.105685-5.701113 7.401446-1.300254 14.902911-2.10041 22.304356-3.100606 7.801524-1.000195 15.603047-1.600313 23.404571-2.300449 5.701113-0.500098 11.502247-0.500098 17.20336-1.000196 8.101582-0.700137 16.103145-0.700137 24.104708-0.500097z"
          p-id="8030"></path>
      </svg>

      <span style="margin-left: 8px;">Blog</span>

      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /></svg>
    </a>

  </div>

  <!-- Next Steps -->
  <h2>Use Steps</h2>

  <input type="hidden" #selection>

  <div class="card-container">
    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
      <span>安装</span>
    </div>

    <div class="card card-small" (click)="selection.value = 'use'" tabindex="0">
      <span>使用</span>
    </div>

    <div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
      <span>参数</span>
    </div>

    <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
      <span>关于</span>
    </div>

  </div>

  <!-- Terminal -->
  <div class="terminal" [ngSwitch]="selection.value">
    <pre *ngSwitchDefault>
        npm install --save ng-live2d
        #or
        yarn add ng-live2d
      </pre>
    <pre *ngSwitchCase="'use'">
        -module
        import ｛ NgLive2dModule ｝ from 'ng-live2d'；
        imports: [NgLive2dModule]；

        -html
        《lib-ng-live2d [modelNameOrUrl]="" [needToTop]=""》《/lib-ng-live2d》
      </pre>
    <pre *ngSwitchCase="'pwa'">
        -modelNameOrUrl string
        模型名,包含以下名字,可不传,默认hijiki
        z16,Epsilon2_1,izumi,koharu,shizuku,miku,hijiki,tororo
        如果传入值没匹配到上面名字则视为传入的为模型url,则加载传入的地址模型

        -needToTop boolean
        是否需要点击回到顶部功能,默认false

        -positionRight boolean
        是否右下角显示,默认true,可不传;false则右下角显示
      </pre>
    <pre *ngSwitchCase="'dependency'">
      angular的live2D插件

      借鉴于https://github.com/QiShaoXuan/vuepress-plugin-cat.git

      本demo github: https://github.com/stack-stark/live2dDemo
    </pre>
  </div>

  <!-- Next Steps -->
  <h2 style="margin-top: 15px;">preview</h2>

  <input type="hidden" #selection>

  <div class="card-container">
    <div class="card card-small" (click)="preview('z16')">
      <span>z16</span>
    </div>
    <div class="card card-small" (click)="preview('Epsilon2_1')">
      <span>Epsilon2_1</span>
    </div>
    <div class="card card-small" (click)="preview('izumi')">
      <span>izumi</span>
    </div>
    <div class="card card-small" (click)="preview('koharu')">
      <span>koharu</span>
    </div>
    <div class="card card-small" (click)="preview('shizuku')">
      <span>shizuku</span>
    </div>
    <div class="card card-small" (click)="preview('miku')">
      <span>miku</span>
    </div>
    <div class="card card-small" (click)="preview('hijiki')">
      <span>hijiki</span>
    </div>
    <div class="card card-small" (click)="preview('tororo')">
      <span>tororo</span>
    </div>
  </div>

</div>
<lib-ng-live2d [modelNameOrUrl]="modelName"></lib-ng-live2d>
